<template>
    <div style="width: 100%; height: 100%;" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
import Cookies from "js-cookie";
import request from "@/utils/request";

export default {
    comments: "percent",
    data() {
        return {
            id: 1,
            chart: [],
            chartData: null,
            borrowCount: 0,
        };
    },
    created() {
        //传入用户ID
        const data = Cookies.get("user");
        const obj = JSON.parse(data);
        this.id = obj.id;
    },
    methods: {
        //获取数据
        async getData() {
            const { data: res } = await request.get(
                `/views/getCategoryBorrowUser?id=${this.id}`
            );
            this.chartData = res;
            this.borrowCount = res.reduce((acc, cur) => acc + cur.count, 0);
            this.echartsInit();
        },
        echartsInit() {
            let chartData = this.chartData;
            let topSix = chartData.slice(0, 6);
            let otherCount = chartData.slice(6).reduce((acc, cur) => acc + cur.count, 0);
            topSix.push({type: "其余", count: otherCount});
            this.chartInstance = echarts.init(this.$refs.chart, null, {
                responsive: true,
            });
            this.chartInstance.setOption({
                title: [
                    {
                        text: "图书借阅分类",
                        left: "50%",
                        textStyle: {
                            fontSize: 16,
                            color: "black",
                        },
                    },
                    {
                        text: "总数",
                        subtext: this.borrowCount + "个",
                        textStyle: {
                            fontSize: 20,
                            color: "black",
                        },
                        subtextStyle: {
                            fontSize: 20,
                            color: "black",
                        },
                        textAlign: "center",
                        x: "34.5%",
                        y: "44%",
                    },
                ],
                tooltip: {
                    trigger: "item",
                    formatter: function (parms) {
                        var str =
                            parms.seriesName +
                            "</br>" +
                            parms.marker +
                            "" +
                            parms.data.legendname +
                            "</br>" +
                            "数量：" +
                            parms.data.value +
                            "</br>" +
                            "占比：" +
                            parms.percent +
                            "%";
                        return str;
                    },
                },
                legend: {
                    type: "scroll",
                    orient: "vertical",
                    left: "70%",
                    align: "left",
                    top: "middle",
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    height: 250,
                    data: topSix.map((item) => item.type),
                },
                series: [
                    {
                        name: "借阅分类",
                        type: "pie",
                        center: ["35%", "50%"],
                        radius: ["40%", "65%"],
                        clockwise: false,
                        avoidLabelOverlap: false,
                        data: topSix.map((item, index) => ({
                            value: item.count,
                            name: item.type + "  " + item.count,
                            itemStyle: {
                                color: [
                                    "#8d7fec",
                                    "#5085f2",
                                    "#e75fc3",
                                    "#f87be2",
                                    "#f2719a",
                                    "#fca4bb",
                                    "#f59a8f",
                                    "#fdb301",
                                    "#57e7ec",
                                    "#cf9ef1",
                                    "#57e7ec",
                                    "#cf9ef1",
                                ][index % 12],
                            },
                            legendname: item.type,
                        })),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                        label: {
                            show: true,
                            position: "outer",
                            formatter: "{b}",
                        },
                        labelLine: {
                            normal: {
                                length: 5,
                                length2: 3,
                                smooth: true,
                            },
                        },
                    },
                ],
            });
        },
    },
    mounted() {
        this.getData();
    },
};
</script>

<style></style>
